<template>
  <a-drawer
      :title="title"
      :maskClosable="true"
      width="650"
      placement="right"
      :closable="true"
      @close="close"
      :visible="visible"
      :body-style="{ paddingBottom: '80px' }">
    <a-form>
      <a-form-item label="监控车道">
        <a-tree
            checkable
            @check="onCheck"
            :checkedKeys="checkedKeys"
            :treeData="treeData"
            @expand="onExpand"
            :expandedKeys="expandedKeysss"
            :checkStrictly="checkStrictly">
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;"></a-icon>
          </span>
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="close" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-drawer>

</template>
<script>
import {queryTreeListForArm, queryTreeListForHasArm, saveArm} from '@/api/api'

export default {
  name: "SelectArmModal",
  components: {
  },
  data() {
    return {
      mac: "",
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      title: "车道监控配置",
      visible: false,
      loading: false,
    }
  },
  methods: {
    onCheck(o) {
      let that = this;
      if (o.checked.length <= 4) {
        if (this.checkStrictly) {
          this.checkedKeys = o.checked;
        } else {
          this.checkedKeys = o
        }
      } else {
        that.$message.error('最多监控四个车道请重新勾选！');
      }
    },
    show() {
      this.visible = true;
    },
    close() {
      this.reset()
      this.$emit('close');
      this.visible = false;
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys;
      this.autoExpandParent = false
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.loading = false
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    handleCancel() {
      this.close()
    },
    handleSubmit() {
      let that = this;
      let params = {
        permissionIds: that.checkedKeys.join(","),
        lastpermissionIds: that.defaultCheckedKeys.join(","),
      };
      that.loading = true;
      saveArm(params).then((res) => {
        if (res.success) {
          that.$message.success(res.message);
          that.loading = false;
          that.close();
        } else {
          that.$message.error(res.message);
          that.loading = false;
          that.close();
        }
      })
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        queryTreeListForArm().then((res) => {
          this.treeData = res.result.treeList
          this.allTreeKeys = res.result.ids
          queryTreeListForHasArm({}).then((res) => {
            this.checkedKeys = [...res.result];
            this.defaultCheckedKeys = [...res.result];
            this.expandedKeysss = this.allTreeKeys;
          })
        })
      }
    }
  }
}

</script>
<style lang="scss" scoped>
.drawer-bootom-button {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

</style>
